<!DOCTYPE html>
<html>
<head>
  <title>RGB Control</title>
  <meta charset="UTF-8">
  <style>
    body {
      font-family: Arial, sans-serif;
      text-align: center;
    }
    .color-block {
      display: inline-block;
      width: 100px;
      height: 100px;
      margin-right: 10px;
    }
    #color-preview {
      width: 300px;
      height: 150px;
      margin-bottom: 20px;
    }
  </style>
</head>
<body>
  <h1>RGB Control</h1>
  <div id="color-preview"></div><br><br>

  <script src="//ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
  
  <script>
    $(document).ready(function(){
      
      // 当滑动条值改变时，发送RGB值到服务器
      $("#red-slider, #green-slider, #blue-slider").on("input", function(){
        var redValue = $("#red-slider").val();
        var greenValue = $("#green-slider").val();
        var blueValue = $("#blue-slider").val();
        
        $.ajax({
          url: "/setRGB",
          method: "POST",
          data: { red: redValue, green: greenValue, blue: blueValue },
          success:function(response){
            console.log(response);
          }
        });
        
      });
      
      // 当接收到服务器的响应时，更新颜色预览区域
      setInterval(function(){
        $.ajax({
          url:"/getRGB",
          method: "GET",
          success:function(response){
            var rgbValues = response.split(",");
            var red = parseInt(rgbValues[0]);
            var green = parseInt(rgbValues[1]);
            var blue = parseInt(rgbValues[2]);
            
            $("#color-preview").css("background-color", "rgb("+red+","+green+","+blue+")");
            
            // 更新滑动条的值
            $("#red-slider").val(red);
            $("#green-slider").val(green);
            $("#blue-slider").val(blue);
          }
        });
      }, 1000);
      
    });
  </script>
</body>
</html>